<template>
  <div class="">
    <Dropdown @on-click="addValidateItem">
      <Button type="primary" size="small">
        添加校验规则
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem name="require">必填校验</DropdownItem>
        <DropdownItem name="min">最小值校验</DropdownItem>
        <DropdownItem name="max">最大值校验</DropdownItem>
        <DropdownItem name="len">固定长度校验</DropdownItem>
        <DropdownItem name="pattern">正则表达式校验</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <div class="m-b-10px"></div>
    <Form :label-width="105">

      <Card v-for="(v, index) in obj.validate" :key="index">
        <p slot="title">{{v.vType | vTypeFilter}}<span class="delete-v-btn" @click.stop="deleteValidateItem(index)"><Icon type="md-trash" /></span></p>
        <div v-if="v.vType == 'require'">
          <FormItem label="校验文案">
            <Input size="small" v-model="v.message" placeholder=""/>
          </FormItem>
          <!--<FormItem label="空格视为错误">
            <i-switch v-model="v.whitespace">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>-->
        </div>
        <div v-if="v.vType == 'min'">
          <FormItem label="校验类型">
            <Select :transfer="true" size="small" v-model="v.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="最小长度">
            <InputNumber size="small" :max="100000" :min="0" v-model="v.min"></InputNumber>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="v.message" placeholder=""/>
          </FormItem>
        </div>
        <div v-if="v.vType == 'max'">
          <FormItem label="校验类型">
            <Select :transfer="true" size="small" v-model="v.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="最大长度">
            <InputNumber size="small" :max="100000" :min="0" v-model="v.max"></InputNumber>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="v.message" placeholder=""/>
          </FormItem>
        </div>
        <div v-if="v.vType == 'len'">
          <FormItem label="校验类型">
            <Select :transfer="true" size="small" v-model="v.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="固定长度">
            <InputNumber size="small" :max="100000" :min="0" v-model="v.len"></InputNumber>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="v.message" placeholder=""/>
          </FormItem>
        </div>
        <div v-if="v.vType == 'pattern'">
          <FormItem label="正则表达式">
            <Input size="small" v-model="v.pattern" placeholder=""/>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="v.message" placeholder=""/>
          </FormItem>
        </div>
      </Card>

    </Form>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    name: 'CValidatePanel',
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value,

        validateItemTypes: [
          {label: '字符串', value: 'string'},
          {label: '数字', value: 'number'},
          {label: '数组', value: 'array'},
          {label: '布尔值', value: 'boolean'}
        ]
      }
    },
    mounted() {

    },
    methods: {
      addValidateItem (name) {
        switch (name) {
          case 'require':
            if (_.find(this.obj.validate, {vType: 'require'})) {
              this.$Message.warning('已存在必填校验规则')
            }else {
              this.obj.validate.push({
                vType: 'require',
                required: true,
                message: '请输入',
                trigger: 'blur',
                // whitespace: false
              })
            }
            break;
          case 'min':
            if (_.find(this.obj.validate, {vType: 'min'})) {
              this.$Message.warning('已存在最小值校验规则')
            }else {
              this.obj.validate.push({
                vType: 'min',
                type: 'string',
                min: 0,
                message: '最少0个字'
              })
            }
            break;
          case 'max':
            if (_.find(this.obj.validate, {vType: 'max'})) {
              this.$Message.warning('已存在最大值校验规则')
            }else {
              this.obj.validate.push({
                vType: 'max',
                type: 'string',
                max: 1000,
                message: '最多1000个字'
              })
            }
            break;
          case 'len':
            if (_.find(this.obj.validate, {vType: 'len'})) {
              this.$Message.warning('已存在固定长度校验规则')
            }else {
              this.obj.validate.push({
                vType: 'len',
                type: 'string',
                len: 8,
                message: '必须固定8个字'
              })
            }
            break;
          case 'pattern':
            if (_.find(this.obj.validate, {vType: 'pattern'})) {
              this.$Message.warning('已存在正则表达式校验规则')
            }else {
              this.obj.validate.push({
                vType: 'pattern',
                type: 'string',
                pattern: '',
                message: '不符合校验规则'
              })
            }
            break;
        }
      },
      deleteValidateItem (index) {
        this.$Modal.confirm({
          title: '提醒',
          content: '确认删除此校验规则吗？',
          onOk: () => {
            this.obj.validate.splice(index, 1)
          }
        });
      }
    },
    filters: {
      vTypeFilter: function (value) {
        switch (value) {
          case 'require':
            return '必填校验';
          case 'min':
            return '最小值校验';
          case 'max':
            return '最大值校验';
          case 'len':
            return '固定长度校验';
          case 'pattern':
            return '正则表达式校验';
        }
      }
    },
    computed: {},
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>
  >>> .ivu-card {
    margin-bottom: 10px;
  }
  >>> .ivu-card .ivu-card-head {
    padding: 5px 10px 5px 10px;
  }
  >>> .ivu-card .ivu-card-body {
    padding: 10px;
  }

  .delete-v-btn {
    float: right;
    cursor: pointer;
  }
</style>
